<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { 
  TrendCharts, 
  DataAnalysis, 
  Goods, 
  User, 
  Setting, 
  Monitor 
} from '@element-plus/icons-vue'

// 模拟数据
const statisticsData = ref({
  totalUsers: 2547,
  activeUsers: 1658,
  newOrders: 385,
  revenue: 28976.53,
  pending: 35,
  growth: 12.5
})

const salesData = ref([
  { date: '周一', sales: 120 },
  { date: '周二', sales: 132 },
  { date: '周三', sales: 101 },
  { date: '周四', sales: 134 },
  { date: '周五', sales: 190 },
  { date: '周六', sales: 230 },
  { date: '周日', sales: 210 }
])

// 图表选项
const salesChartOption = ref({
  title: {
    text: '本周销售趋势',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: salesData.value.map(item => item.date)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      data: salesData.value.map(item => item.sales),
      areaStyle: {
        opacity: 0.3,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#409EFF' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ]
        }
      },
      lineStyle: {
        width: 3,
        color: '#409EFF'
      },
      itemStyle: {
        color: '#409EFF'
      }
    }
  ]
})

const pieChartOption = ref({
  title: {
    text: '产品类别分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '产品类别',
      type: 'pie',
      radius: '70%',
      data: [
        { value: 335, name: '肉类' },
        { value: 310, name: '水产' },
        { value: 234, name: '蔬菜' },
        { value: 135, name: '水果' },
        { value: 154, name: '谷物' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 最新订单
const latestOrders = ref([
  { id: 'ORD-2023-07-001', customer: '张三', product: '冷冻牛肉', amount: 1289.50, status: '已完成' },
  { id: 'ORD-2023-07-002', customer: '李四', product: '冷冻三文鱼', amount: 458.00, status: '处理中' },
  { id: 'ORD-2023-07-003', customer: '王五', product: '冷冻虾仁', amount: 678.25, status: '待发货' },
  { id: 'ORD-2023-07-004', customer: '赵六', product: '冷冻水饺', amount: 126.50, status: '已完成' },
  { id: 'ORD-2023-07-005', customer: '孙七', product: '冷冻鸡肉', amount: 345.75, status: '已取消' }
])

onMounted(() => {
  // 这里可以添加获取实际数据的API调用
})
</script>

<template>
  <div class="dashboard-container">
    <div class="page-header">
      <h1>仪表盘</h1>
      <div class="date-info">{{ new Date().toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}</div>
    </div>
    
    <!-- 统计卡片区 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-icon blue">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">用户总数</div>
              <div class="stat-value">{{ statisticsData.totalUsers }}</div>
              <div class="stat-trend positive">
                <span>+{{ statisticsData.growth }}%</span>
                <span>本月</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-icon green">
              <el-icon><Goods /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">新增订单</div>
              <div class="stat-value">{{ statisticsData.newOrders }}</div>
              <div class="stat-trend positive">
                <span>+5.2%</span>
                <span>本周</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-icon orange">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">总收入</div>
              <div class="stat-value">¥{{ statisticsData.revenue.toLocaleString() }}</div>
              <div class="stat-trend positive">
                <span>+8.3%</span>
                <span>本月</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-icon purple">
              <el-icon><Monitor /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">待处理</div>
              <div class="stat-value">{{ statisticsData.pending }}</div>
              <div class="stat-trend negative">
                <span>-2.1%</span>
                <span>本周</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 图表区域 -->
    <div class="chart-section">
      <el-row :gutter="20">
        <el-col :xs="24" :lg="16">
          <el-card shadow="hover" class="chart-card">
            <div ref="salesChart" style="height: 350px;"></div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :lg="8">
          <el-card shadow="hover" class="chart-card">
            <div ref="pieChart" style="height: 350px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 最新订单 -->
    <div class="latest-orders">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>最新订单</h3>
            <el-button type="primary" size="small" plain>查看全部</el-button>
          </div>
        </template>
        
        <el-table :data="latestOrders" style="width: 100%" stripe>
          <el-table-column prop="id" label="订单号" min-width="120" />
          <el-table-column prop="customer" label="客户" min-width="100" />
          <el-table-column prop="product" label="产品" min-width="120" />
          <el-table-column prop="amount" label="金额">
            <template #default="scope">
              ¥{{ scope.row.amount.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default>
              <el-button link type="primary">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
// 需要在options API中定义的方法
export default {
  methods: {
    getStatusType(status: string) {
      switch (status) {
        case '已完成':
          return 'success'
        case '处理中':
          return 'primary'
        case '待发货':
          return 'warning'
        case '已取消':
          return 'danger'
        default:
          return 'info'
      }
    }
  },
  mounted() {
    // 引入echarts
    import('echarts').then((echarts) => {
      const salesChart = echarts.init(this.$refs.salesChart as HTMLElement)
      salesChart.setOption(this.salesChartOption)
      
      const pieChart = echarts.init(this.$refs.pieChart as HTMLElement)
      pieChart.setOption(this.pieChartOption)
      
      window.addEventListener('resize', () => {
        salesChart.resize()
        pieChart.resize()
      })
    })
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
  color: #17233d;
}

.date-info {
  font-size: 14px;
  color: #808695;
}

.statistics-cards {
  margin-bottom: 24px;
}

.stat-card {
  height: 120px;
  display: flex;
  overflow: hidden;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 16px;
  color: white;
}

.stat-icon.blue {
  background-color: #409EFF;
}

.stat-icon.green {
  background-color: #67C23A;
}

.stat-icon.orange {
  background-color: #E6A23C;
}

.stat-icon.purple {
  background-color: #8557F3;
}

.stat-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #17233d;
  margin-bottom: 8px;
}

.stat-trend {
  font-size: 12px;
  display: flex;
  gap: 8px;
}

.stat-trend.positive {
  color: #67C23A;
}

.stat-trend.negative {
  color: #F56C6C;
}

.chart-section {
  margin-bottom: 24px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.latest-orders {
  margin-bottom: 24px;
}
</style> 